<%@page import="javax.swing.text.DateFormatter"%>
<%@page import="java.text.DateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="org.ocpsoft.pretty.time.PrettyTime"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!--comment-->
<script>
function confirmDelete(delUrl) {
  if (confirm("Are you sure you want to delete?")) {
    document.location = delUrl;
  }
}
</script>

<script type="text/javascript">
function abc (id){
   Wicket.Event.add(window,"domready",function(event) {
	  $('#comment' + id).tinymce({
            script_url : '${pageContext.request.contextPath}/scripts/tiny_mce/tiny_mce.js',
            theme : "advanced",
            auto_resize : "true",
            relative_urls : false,
            verify_html : false,
            width : "100%",
            height: '250',
            plugins : "safari,style,layer,emotions,iespell,paste,xhtmlxtras",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,paste,pastetext,pasteword,|,bullist,numlist,|,emotions",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_buttons4 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_resizing : false
      });
	});
}
function ShowEditCommentPanel(id){
   $('#editCommentDialog' + id).show();
   abc(id);
}
function HideEditCommentPanel(id){
   $('#editCommentDialog' + id).hide();
}
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/tiny_mce/jquery.tinymce.js"></script>

<c:forEach items="${commentLists }" var="comment">
	<div class="commentContainer">
		<span> <a class="profileThumb" href="">
				<span class="thumbmask"> <span class="topleft"></span> <span
					class="topright"></span> <span class="bottomleft"></span> <span
					class="bottomright"></span> <img id="profileImgf9"
					src="${pageContext.request.contextPath}/images/default_profile.png">
			</span>
		</a>
		</span>
		<div class="commentContainer_text">
			<div class="commentContainer_arrow"></div>
			<span class="author">${comment.user.username }</span> <span></span>
			
			<c:set var="createdDate" value="${comment.createdDate.getTime()}"></c:set> 
			<span class="date">
				<%=new PrettyTime().format((Date) pageContext.getAttribute("createdDate"))%>
			</span> 
			
			<span class="tab" style="width: 80px; z-index: 9;"> 
			<a	class="deleteComment" id="deleteComment" href="javascript:confirmDelete('${pageContext.request.contextPath}/task/comment/${comment.id}/delete')"	onclick=""><img src="${pageContext.request.contextPath}/images/admin-remove.png" alt="delete"></a> 
			<a id="editCommentfa" href="#" onclick="ShowEditCommentPanel(${comment.id});" style="text-decoration: none;">Edit</a>
			</span>
			<div class="commentContainer_text_comment">
				<p>${comment.content }</p>
			</div>

			<div class="corner corner_nw"></div>
			<div class="corner corner_ne"></div>
			<div class="corner corner_se"></div>
			<div class="corner corner_sw"></div>
		</div>
	</div>
	<div style="display: none;" id="editCommentDialog${comment.id}">
		<div style="" id="dialogContainerd9">
			<div id="gcdialog">
				<div class="gcdtitle">
					<span class="title">Edit your comment</span>
					<a onclick="HideEditCommentPanel(${comment.id});" id="close"></a>
				</div>
				<div class="contentwrapper">
					<div class="content">
						<span>
							<form id="form${comment.id }" method="get" action="${pageContext.request.contextPath}/task/${comment.task.id}/comment/${comment.id}/update" enctype="multipart/form-data">
								<div style="width: 0px; height: 0px; position: absolute; left: -100px; top: -100px; overflow: hidden">
									
								</div>
								<div class="commentInputWrapper">
									<textarea class="commentArea" name="comment" id="comment${comment.id }" autofocus="autofocus">${comment.content }</textarea>
									<span class="mceEditor defaultSkin" id="commentf5_parent"></span>
								</div>
								
								<div style="line-height: 34px">
									<a class="gcSubmit" onclick="var content = document.getElementById('comment${comment.id }').value; if(content == ''){alert(content); return false;} var e=document.getElementById('form${comment.id }'); e.name='submitLink'; e.value='x';var f=document.getElementById('form${comment.id }');var ff=f;if (ff.onsubmit != undefined) { if (ff.onsubmit()==false) return false; }f.submit();e.value='';e.name='';return false;">
										Update 
										<span class="left"></span>
										<span class="right"></span>
									</a> or <a id="cancel${comment.id}" href="#" onclick="HideEditCommentPanel(${comment.id});">cancel</a>
								</div>
								<div class="spacer">&nbsp;</div>
							</form>
						</span>
					</div>
				</div>
				<div class="background userDefinedBg"></div>
			</div>
		</div>
	</div>
</c:forEach><!--end comment-->